<template>
    <ContentBox title="概览">
        <div class="content">
            <div>
                <div>
                    <div>
                        <span class="digiter-number">13123</span>km²
                    </div>
                    <div>农业耕地面积</div>
                </div>
                <div>
                    <div>
                        <span class="digiter-number">13123</span>km²
                    </div>
                    <div>畜牧业场地面积</div>
                </div>
            </div>
            <div>
                <div>
                    <div>
                        <span class="digiter-number">13123</span>km²
                    </div>
                    <div>林业占地面积</div>
                </div>
                <div>
                    <div>
                        <span class="digiter-number">13123</span>km²
                    </div>
                    <div>渔业水域面积</div>
                </div>
            </div>
            <div>
                <div>
                    <div>
                        <span class="digiter-number">13123</span>km²
                    </div>
                    <div>人口总量</div>
                </div>
                <div>
                    <div>
                        <span class="digiter-number">13123</span>km²
                    </div>
                    <div>人均/总GDP</div>
                </div>
            </div>
            <div>
                <div>
                    <div>
                        <span class="digiter-number">13123</span>km²
                    </div>
                    <div>企业认证产品</div>
                </div>
                <div>
                    <div>
                        <span class="digiter-number">13123</span>km²
                    </div>
                    <div>农村合作社</div>
                </div>
            </div>
            <div>
                <div>
                    <div>
                        <span class="digiter-number">13123</span>km²
                    </div>
                    <div>家庭农场</div>
                </div>
                <div>
                    <div>
                        <span class="digiter-number">13123</span>km²
                    </div>
                    <div>生态健康养殖示范区</div>
                </div>
            </div>
            <div>
                <div>
                    <div>
                        <span class="digiter-number">13123</span>km²
                    </div>
                    <div>益农信息社</div>
                </div>
                <div>
                    <div>
                        <span class="digiter-number">13123</span>km²
                    </div>
                    <div>电商企业</div>
                </div>
            </div>
        </div>
    </ContentBox>

</template>
<script>
    import ContentBox from "../../components/common/ContentBoxSmall"

    export default {
        name: "Preview",
        components: {
            ContentBox
        }
    }
</script>

<style lang="scss" scoped>
    .content {
        height: 100%;
        padding: 20px;

        display: flex;
        flex-direction: column;
        > div {
            flex: 1;

            display: flex;

            &:nth-last-child(n+2) {
                > div {
                    border-bottom: 4px dotted #025879;
                }

            }
            > div {
                flex: 1;

                display: flex;
                flex-direction: column;

                justify-content: center;
                align-items: center;

                > div {
                    &:first-child {
                        font-size: 40px;
                        color: #E15732;
                        > span {
                            color: #E15732;
                            font-size: 60px;
                            font-weight: 600;
                        }
                    }

                    &:last-child {
                        font-size: 34px;
                        font-weight: 500;

                    }

                }

                &:first-child {
                    border-right: 4px dotted #025879;
                }
                &:last-child{
                    >div{
                        &:first-child{
                            color: #05FFFF;
                            font-weight: 600;
                            >span{
                                color: #05FFFF;

                            }
                        }
                    }
                }



            }
        }
    }
</style>
